<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline" @keyup.enter.native="search()">
      <el-form-item label="活动名称">
        <br/>
        <el-input style="margin-left:-70px;width:200px" v-model="formInline.activityName" placeholder />
      </el-form-item>

      <el-form-item label="分享人姓名">
        <br/>
        <el-input style="margin-left:-70px;width:200px" v-model="formInline.shareName" placeholder />
      </el-form-item>

      <el-form-item label="所属门店">
        <br/>
        <el-input style="margin-left:-70px;width:200px" v-model="formInline.storeName" placeholder />
      </el-form-item>

      <div style="width:100%;display:flex;justify-content:flex-end;">
        <el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="search()" size="mini">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="kong()" size="mini" icon="el-icon-delete">清空</el-button>
				</el-form-item>
      </div>
    </el-form>

    <el-table :data="tableData" v-loading="loading" border style="width: 100%;"
      :header-cell-style="{background:'#eef1f6',color:'#606266'}">
      <el-table-column type="index" width="60" label="序号" align="center" />
      <el-table-column prop="activityCode" label="活动编码" align="center" />
      <el-table-column prop="activityName" label="活动名称" align="center" />
      <el-table-column prop="shareName" label="分享人" align="center" />
      <el-table-column prop="shareCounts" label="分享次数" align="center" />
      <el-table-column prop="totalClickShareLinkEnterActivityCounts" label="点击分享链接进入活动次数统计" align="center" />
      <el-table-column prop="storeName" label="所属门店" align="center" />
    </el-table>

    <div class="block" style="margin-top:5px;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:page-sizes="[10, 20, 30, 50, 100, 150, 200]" :current-page="listQuery.current"
				:page-size="listQuery.size" layout="total, sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>
  </div>
</template>

<script>
import { post } from '../../utils/request';

export default {
  data() {
    return {
      formInline: {
        activityName: "",
        shareName: "",
        storeName: ""
      },

      tableData: [],
      loading: false,
      listQuery: {
        current: 1,
        size: 20
      },
      total: 0
    }
  },

  created() {
    this.search();
  },

  methods: {
    search() {
      this.loading = true;
      post('/api/flashsale-service/v1/shareStatistics/queryShareStatisticalList', {
        condition:this.formInline,
        ...this.listQuery
      }).then(res => {
        if(res.code == 1) {
          this.total = res.total;
          this.listQuery.current = res.current;
          this.listQuery.size = res.size;
          this.tableData = res.records;
        }
      }).finally(() => {
        this.loading = false;
      })
    },
    kong() {
      this.formInline = this.$options.data().formInline;
    },

    handleSizeChange(value) {
      this.listQuery.size = value;
      this.search();
    },
    handleCurrentChange(value) {
      this.listQuery.current = value;
      this.search();
    },
    toAdd() {
      
    }
  }
}
</script>